<template>
	<div class="ReceiptInfo">
		<div class="title">填写收款信息 <div class="down" @click='$router.go(-1)'></div></div>
		<div class="con">
			<dl>
				<dt>手机号</dt>
				<dd><input type="text" v-model="mobile"></dd>
			</dl>
			<dl>
				<dt>微信号</dt>
				<dd><input type="text" v-model="wechat"></dd>
			</dl>
			<dl>
				<dt>支付宝</dt>
				<dd><input type="text" v-model="alipay"></dd>
			</dl>
			<!-- <dl>
				<dt>钱包地址</dt>
				<dd><input type="text" v-model=""></dd>
			</dl> -->
			<dl>
				<dt>银行卡</dt>
				<dd>
					<input type="text" placeholder="请输入收款户名（必填）" v-model="bank_user">
					<select required v-model="bank_name">
						<option value="" disabled selected hidden>请选择银行...</option>
						<option v-for="(item,index) in bankArr" :key='index' :value="item">{{ item }}</option>
					</select>
					<input type="text" placeholder="请输入收款账号（必填）" v-model="bank">
				</dd>
			</dl>
		</div>
		<input type="submit" value="提交" :disabled='!isDisabled' class="submit" @click='sendCode'>
		<confirm v-model="confirmShow" inputType='text' title='我们已为您发送验证码，请填写' @yes='submit' :inputShow='true'></confirm>
		<p class="prompt">请留真实信息，以免造成经济损失</p>

	</div>
</template>

<script>
var bankArr = ['','交通银行','上海浦东发展银行','光大银行','招商银行','中信银行','邮政银行','郑州银行','广发银行','中国农业银行','中国建设银行','民生银行','中国工商银行','中国银行','平安银行']
import { getReceiptInfo, editReceiptInfo, sendCodeInfo, visCode } from '../../../../config/getData'
import Confirm from '../../../component/confirm/confirm'
import { mapState, mapActions } from 'vuex'

export default {
	data(){
		return {
			selected: '',
			bankArr,
			mobile:'',
			wechat:'',
			alipay:'',
			bank:'',
			bank_name:'',
			bank_user:'',
			confirmShow: false
		}
	},
	computed:{
		...mapState([
			'userInfo'
		]),
		isDisabled(){
			return !!this.mobile && !!this.wechat && !!this.alipay && !!this.bank && !!this.bank_name && !!this.bank_user
		}
	},
	created(){
		//填写原有的信息
		getReceiptInfo().then( res => {
			if(res.data.alipay !== '') this.alipay = res.data.alipay 
			if(res.data.bank !== '') this.bank = res.data.bank 
			if(res.data.bank_name !== '') this.bank_name = res.data.bank_name 
			if(res.data.bank_user !== '') this.bank_user = res.data.bank_user 
			if(res.data.mobile !== '') this.mobile = res.data.mobile 
			if(res.data.wechat !== '') this.wechat = res.data.wechat 
		})
	},
	methods:{
		...mapActions([
			'setUserInfo'
		]),
		sendCode(){
			sendCodeInfo(this.userInfo.mobile, 2).then( res => {
				this.confirmShow = true
				var text = res.data.status == 1 ? '验证码已发送到 ' + this.userInfo.mobile : res.msg

				this.$vux.toast.show({
					text,
					time: 4000
				});
			})
		},
		confirm(){

		},
		submit(code){
			//验证验证码
			visCode(this.userInfo.mobile, code, 2).then( res =>{	//验证码填写正确

				editReceiptInfo(this.mobile,this.wechat,this.alipay,this.bank,this.bank_name,this.bank_user).then( res => {
					this.$vux.toast.show(res.msg)

					//修改缓存中的手机号
					this.userInfo.mobile = this.mobile
					this.setUserInfo(this.userInfo)

					//判断是否需要返回上一级
					var isReturn = this.$route.params.isReturn;
					if(isReturn != 1) return ;
					this.$router.go(-1)
				})

			})

		}
	},
	components:{
		Confirm
	}
}
</script>


<style lang="scss" scoped>
@import '../../../../assets/css/all';
*{outline: none;}

.ReceiptInfo{ @include screen;
	.title{line-height: 50px;text-align: center;background-color: white;font-size:16px;margin-bottom:15px;}
	.down{position: absolute;left:0;top:0;width:0;height:0;padding:25px;
		&:after,&:before{position: absolute;left:50%;top:50%;content: '';display: block;width:20px;height: 2px;background-color: #666;}
		&:after{transform: translate(-50%,-50%) rotate(45deg)}
		&:before{transform: translate(-50%,-50%) rotate(-45deg)}
	}
	.con{
		dl{display: flex;font-size:15px;line-height:45px;padding:0 15px;background-color: white;position: relative;
			&:after{content: '';display: block;width:100%;height:1px;background-color: #e6e6e6;position: absolute;left:0;bottom:0;}
			dt{width:60px;}
			dd{flex:1;
				input{height: 45px;box-sizing: border-box;width:100%;padding:0 15px;}
				select{height: 45px;width:100%;border:none;border-bottom: 1px solid #e6e6e6;background-color: transparent;padding-left: 10px;}
			}
		}
	}
	input.submit{width:90%;margin:20px 0 0 5%;background-color: $red;}
	input.submit:disabled{background-color: #F79595;}
	.prompt{text-align: center;font-size:15px;color:$red;width:100%;margin:80px 0 40px;}
}
</style>

